<div *ngIf="properties?.length" class="mb-4">
  <h3>Component properties</h3>
  <ng-container *ngTemplateOutlet="propsTable;context:{properties: properties, hasDefault: true}"></ng-container>
</div>

<div *ngIf="events?.length" class="mb-4">
  <h3>Component events</h3>
  <ng-container *ngTemplateOutlet="propsTable;context:{properties: events}"></ng-container>
</div>

<ng-template #propsTable let-properties="properties" let-defaultValue="hasDefault">
  <mat-table [dataSource]="properties">
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="example">
      <mat-header-cell *matHeaderCellDef> Example </mat-header-cell>
      <mat-cell *matCellDef="let element"> '{{element.example}}' </mat-cell>
    </ng-container>

    <ng-container matColumnDef="description">
      <mat-header-cell *matHeaderCellDef> Description </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.description}}</mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
</ng-template>
